<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center">
                        <div v-if="!route.query?.id">新增BOM清单</div>
                        <div v-else-if="route.query?.copy">复制BOM清单</div>
                        <div v-else-if="route.query?.info">BOM清单详情</div>
                        <div v-else>编辑BOM清单</div>
                    </div>
                </template>
                <template #extra>
                    <div class="flex items-center" v-if="!route.query.info">
                        <el-button type="primary" @click="submitForm">保 存</el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479f6">
                            <Position />
                        </el-icon>
                        <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form
                            :model="form"
                            :rules="rules"
                            :disabled="flag"
                            ref="userRef"
                            label-width="110px"
                        >
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="书刊编码" prop="bookCode">
                                        <el-input
                                            v-model="form.bookCode"
                                            placeholder="请输入书刊编码"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="书刊名称" prop="orderName">
                                        <el-input
                                            v-model="form.orderName"
                                            placeholder="请输入书刊名称"
                                        />
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="6">
                                    <el-form-item label="印刷数量(册)" prop="printingCount">
                                        <el-input v-model="form.printingCount" type="number" placeholder="请输入印刷数量(册)"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="文件日期" prop="fileDate">
                                        <el-date-picker style="width: 100%; " v-model="form.fileDate"
                                            value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="6">
                                    <el-form-item label="科目" prop="subjectType">
                                        <el-select
                                            style="width: 100%"
                                            v-model="form.subjectType"
                                            placeholder="请选择科目"
                                        >
                                            <el-option
                                                v-for="item in ems_workshop_subject_type"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="书号" prop="bookNo">
                                        <el-input
                                            v-model="form.bookNo"
                                            placeholder="请输入书号"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <!-- <el-col :span="6">
                                    <el-form-item label="打包方式" prop="packWay">
                                        <el-select style="width:100%" v-model="form.packWay" placeholder="请选择打包方式">
                                            <el-option v-for="item in ems_order_pack_way" :key="item.value"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col> -->

                                <!-- <el-col :span="6">
                  <el-form-item label="定价" prop="fixPrice">
                    <el-input
                      type="number"
                      v-model="form.fixPrice"
                      placeholder="请输入定价"
                    />
                  </el-form-item>
                </el-col> -->
                                <el-col :span="6">
                                    <el-form-item label="出版编码" prop="pubNo">
                                        <el-input
                                            v-model="form.pubNo"
                                            @change="changePubNo"
                                            placeholder="请输入出版编码"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="出版社" prop="publishingHouse">
                                        <el-input
                                            v-model="form.publishingHouse"
                                            placeholder="请输入出版社"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="适用范围" prop="applyRadius">
                                        <el-input
                                            v-model="form.applyRadius"
                                            placeholder="请输入适用范围"
                                            maxlength="30"
                                        />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <!-- <el-col :span="6">
                                    <el-form-item label="清样编号" prop="sampleNo">
                                        <el-input v-model="form.sampleNo" placeholder="请输入清样编号" maxlength="30" />
                                    </el-form-item>
                                </el-col> -->
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input
                                            v-model="form.remark"
                                            type="textarea"
                                            placeholder="请输入内容"
                                        ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item disabled title="产品品种" name="2" v-if="tip ==0 || tip==2">
                    <template #title>
                        <el-icon style="color: #4479f6">
                            <Position />
                        </el-icon>
                        <span class="title">产品品种</span>
                    </template>
                    <div class="order-form">
                        <el-button
                            size="small"
                            type="primary"
                            style="margin-bottom: 5px"
                            v-if="!route.query.info"
                            @click="handleAddorderBreed"
                        >
                            新增
                        </el-button>
                        <el-form :model="data" ref="orderBreedForm" class="data-form">
                            <el-table
                                :data="data.orderBreed"
                                border
                                :header-cell-class-name="must"
                                @selection-change="handleSelectionChange"
                            >
                                <!-- <el-table-column type="selection" width="55" /> -->
                                <el-table-column
                                    label="序号"
                                    width="60"
                                    type="index"
                                    align="center"
                                />
                                <!-- <el-table-column
                                    v-if="route.query?.id && !copy"
                                    label="订单品种编码"
                                    min-width="120"
                                    prop="breedNo"
                                    align="center"
                                >
                                </el-table-column> -->
                                <el-table-column
                                    label="品种"
                                    width="150"
                                    prop="breedType"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item
                                            :prop="'orderBreed.' + scope.$index + '.breedType'"
                                            :rules="[
                                                {
                                                    required: true,
                                                    message: '品种',
                                                    trigger: 'change',
                                                },
                                            ]"
                                        >
                                            <el-select
                                                :disabled="flag"
                                                style="width: 100%"
                                                v-model="scope.row.breedType"
                                                placeholder="请选择品种"
                                            >
                                                <el-option
                                                    v-for="item in ems_order_breed_type"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="组成"
                                    width="120"
                                    prop="makeUp"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item
                                            :prop="'orderBreed.' + scope.$index + '.makeUp'"
                                            :rules="[
                                                {
                                                    required: true,
                                                    message: '组成',
                                                    trigger: 'blur',
                                                },
                                            ]"
                                        >
                                            <el-select
                                                :disabled="flag"
                                                style="width: 100%"
                                                v-model="scope.row.makeUp"
                                                placeholder="请选择组成"
                                            >
                                                <el-option
                                                    v-for="item in ems_order_make_up"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column label="印刷数量(册)" width="120" prop="printCount" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderBreed.' + scope.$index + '.printCount'"
                                            :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
                                            <el-input :disabled="flag" type="number" v-model="scope.row.printCount"
                                                placeholder="请输入印刷数量"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column> -->

                                <!-- <el-table-column label="实用纸" width="120" prop="practicalPaper" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderBreed.' + scope.$index + '.practicalPaper'"
                                            :rules="[{ required: true, message: '实用纸', trigger: 'blur' }]">
                                            <el-select clearable :disabled="flag" style="width:100%"
                                                v-model="scope.row.practicalPaper" placeholder="请选择实用纸">
                                                <el-option v-for="item in ems_order_practical_paper" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="令数" width="120" prop="lingCount" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderBreed.' + scope.$index + '.lingCount'"
                                            :rules="[{ required: true, message: '令数', trigger: 'blur' }]">
                                            <el-input :disabled="flag" type="number"
                                                @blur="changeSumPrice(scope.row, scope.$index)"
                                                v-model="scope.row.lingCount" placeholder="请输入令数"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="加工费(元/令)" width="120" prop="processPrice" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderBreed.' + scope.$index + '.processPrice'"
                                            :rules="[{ required: true, message: '加工费', trigger: 'blur' }]">
                                            <el-input :disabled="flag" @blur="changeSumPrice(scope.row, scope.$index)"
                                                type="number" v-model="scope.row.processPrice"
                                                placeholder="请输入加工费"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="金额(元)" width="120" prop="sumPrice" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderBreed.' + scope.$index + '.sumPrice'"
                                            :rules="[{ required: true, message: '金额', trigger: 'change' }]">
                                            <el-input :disabled="flag" type="number" v-model="scope.row.sumPrice"
                                                placeholder="自动计算"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column> -->
                                <el-table-column
                                    label="成品尺寸(mm)"
                                    width="120"
                                    prop="finishSize"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                @blur="changeDimension(scope.row)"
                                                :disabled="flag"
                                                v-model="scope.row.finishSize"
                                                placeholder="请输入成品尺寸"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="装订方式"
                                    width="120"
                                    prop="bindingMode"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                clearable
                                                style="width: 100%"
                                                v-model="scope.row.bindingMode"
                                                placeholder="请选择装订方式"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_order_binding_mode"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="开本数"
                                    width="120"
                                    prop="bookSize"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                style="width: 100%"
                                                v-model="scope.row.bookSize"
                                                placeholder="请选择开本数"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_produce_book_size"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="印刷分类"
                                    width="120"
                                    prop="type"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item v-if="tip == 0">
                                            <el-select
                                                style="width: 100%"
                                                v-model="scope.row.printCategory"
                                                placeholder="请选择印刷分类"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in printCategoryList"
                                                    :key="item"
                                                    :label="item.label"
                                                    :value="item.value"
                                                    :disabled="item.diasbled"
                                                />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item v-if="tip == 1">
                                            <el-select
                                                style="width: 100%"
                                                v-model="scope.row.printCategory"
                                                placeholder="请选择印刷分类"
                                                :disabled="flag || scope.row.printCategory == 2"
                                            >
                                                <el-option
                                                    v-for="item in printCategoryList"
                                                    :key="item"
                                                    :label="item.label"
                                                    :value="item.value"
                                                    :disabled="item.diasbled"
                                                />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item v-if="tip == 2">
                                            <el-select
                                                style="width: 100%"
                                                v-model="scope.row.printCategory"
                                                placeholder="请选择印刷分类"
                                                :disabled="flag || scope.row.printCategory == 1"
                                            >
                                                <el-option
                                                    v-for="item in printCategoryList"
                                                    :key="item"
                                                    :label="item.label"
                                                    :value="item.value"
                                                    :disabled="item.diasbled"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="详细信息"
                                    min-width="200"
                                    prop="specifics"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                :disabled="flag"
                                                v-model="scope.row.specifics"
                                                type="textarea"
                                                placeholder="请输入详细信息"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="印张"
                                    prop="printSheet"
                                    width="120"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                :disabled="flag"
                                                type="number"
                                                v-model="scope.row.printSheet"
                                                placeholder="请输入印张"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="印色"
                                    width="120"
                                    prop="printColor"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                clearable
                                                style="width: 100%"
                                                v-model="scope.row.printColor"
                                                placeholder="请选择印色"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_order_print_color"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="颜色"
                                    width="120"
                                    prop="color"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                clearable
                                                style="width: 100%"
                                                v-model="scope.row.color"
                                                placeholder="请选择颜色"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_produce_color"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="用纸尺寸"
                                    prop="paperSize"
                                    width="120"
                                    align="center"
                                    :disabled="flag"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                style="width: 100%"
                                                v-model="scope.row.paperSize"
                                                placeholder="请选择用纸尺寸"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_produce_paper_size"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <!--                                <el-table-column-->
                                <!--                                    label="纸型"-->
                                <!--                                    prop="paperSize"-->
                                <!--                                    width="120"-->
                                <!--                                    align="center"-->
                                <!--                                >-->
                                <!--                                    <template #default="scope">-->
                                <!--                                        <el-form-item>-->
                                <!--                                            <el-select-->
                                <!--                                                style="width: 100%"-->
                                <!--                                                v-model="scope.row.paperType"-->
                                <!--                                                placeholder="请选择纸型"-->
                                <!--                                                :disabled="flag"-->
                                <!--                                            >-->
                                <!--                                                <el-option-->
                                <!--                                                    v-for="item in mes_paper_type"-->
                                <!--                                                    :key="item.value"-->
                                <!--                                                    :label="item.label"-->
                                <!--                                                    :value="item.value"-->
                                <!--                                                />-->
                                <!--                                            </el-select>-->
                                <!--                                        </el-form-item>-->
                                <!--                                    </template>-->
                                <!--                                </el-table-column>-->
                                <!--                                <el-table-column-->
                                <!--                                    label="定量"-->
                                <!--                                    width="120"-->
                                <!--                                    prop="weight"-->
                                <!--                                    align="center"-->
                                <!--                                >-->
                                <!--                                    <template #default="scope">-->
                                <!--                                        <el-form-item>-->
                                <!--                                            <el-input-->
                                <!--                                                :disabled="flag"-->
                                <!--                                                type="number"-->
                                <!--                                                v-model="scope.row.weight"-->
                                <!--                                                placeholder="请输入定量"-->
                                <!--                                            ></el-input>-->
                                <!--                                        </el-form-item>-->
                                <!--                                    </template>-->
                                <!--                                </el-table-column>-->
                                <el-table-column
                                    label="贴数信息"
                                    width="120"
                                    prop="piece"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                :disabled="flag"
                                                v-model="scope.row.piece"
                                                placeholder="请输入贴数信息"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="版材尺寸"
                                    prop="sheetSize"
                                    width="120"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select
                                                clearable
                                                style="width: 100%"
                                                v-model="scope.row.sheetSize"
                                                placeholder="请选择版材尺寸"
                                                :disabled="flag"
                                            >
                                                <el-option
                                                    v-for="item in ems_machine_info_size"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="出版编号"
                                    width="120"
                                    prop="pubNo"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                :disabled="flag"
                                                v-model="scope.row.pubNo"
                                                placeholder="请输入出版编号"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <!-- <el-table-column
                                    label="交货日期"
                                    width="120"
                                    prop="deliverDate"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-date-picker
                                                @blur="changeDeliverDate(scope.row)"
                                                :disabled="flag"
                                                style="width: 100%"
                                                v-model="scope.row.deliverDate"
                                                value-format="YYYY-MM-DD"
                                                type="date"
                                                placeholder="请选择日期"
                                            />
                                        </el-form-item>
                                    </template>
                                </el-table-column> -->
                                <!-- <el-table-column
                                    label="备注"
                                    width="120"
                                    prop="remark"
                                    align="center"
                                >
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input
                                                :disabled="flag"
                                                v-model="scope.row.remark"
                                                placeholder="请输入备注"
                                            ></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column> -->
                                <el-table-column
                                    v-if="!flag"
                                    label="操作"
                                    align="center"
                                    fixed="right"
                                    class-name="small-padding fixed-width"
                                >
                                    <template #default="scope">
                                        <el-tooltip content="删除" placement="top">
                                            <el-button
                                                link
                                                type="primary"
                                                icon="Delete"
                                                @click="handleDelete(scope.row)"
                                            ></el-button>
                                        </el-tooltip>
                                        <!-- <el-tooltip content="删除" v-if="tip == 1" placement="top">
                                            <el-button
                                                link
                                                v-if="scope.row.printCategory == 1"
                                                type="primary"
                                                icon="Delete"
                                                @click="handleDelete(scope.row)"
                                            ></el-button>
                                        </el-tooltip>
                                        <el-tooltip content="删除" v-if="tip == 2" placement="top">
                                            <el-button
                                                link
                                                v-if="scope.row.printCategory == 2"
                                                type="primary"
                                                icon="Delete"
                                                @click="handleDelete(scope.row)"
                                            ></el-button>
                                        </el-tooltip> -->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form>
                    </div>
                </el-collapse-item>
                <!-- <el-collapse-item disabled  title="产品明细" name="3">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">产品明细</span>
                    </template>
                    <div class="order-form">
                        <el-form :model="data" ref="orderProductForm" :disabled="flag" class="data-form">
                            <el-table :data="data.orderProduct" ref="orderProductRef" border
                                :header-cell-class-name="mustProduct" :row-class-name="tableRowClassName">
                                <el-table-column label="序号" width="60" type="index" align="center" />
                                <el-table-column v-if="route.query?.id && !copy" label="订单品种编码" min-width="120"
                                    prop="breedNo" align="center">
                                </el-table-column>
                                <el-table-column label="品种" prop="breedType" min-width="160" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderProduct.' + scope.$index + '.breedType'"
                                            :rules="[{ required: true, message: '品种', trigger: 'blur' }]">
                                            <el-select style="width:100%" v-model="scope.row.breedType" disabled
                                                placeholder="请选择品种">
                                                <el-option v-for="item in ems_order_breed_type" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="组成" min-width="160" prop="makeUp" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderProduct.' + scope.$index + '.makeUp'"
                                            :rules="[{ required: true, message: '组成', trigger: 'blur' }]">
                                            <el-select style="width:100%" disabled v-model="scope.row.makeUp"
                                                placeholder="请选择组成">
                                                <el-option v-for="item in ems_order_make_up" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="印色" width="120" prop="printColor" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderProduct.' + scope.$index + '.printColor'"
                                            :rules="[{ required: true, message: '印色', trigger: 'blur' }]">
                                            <el-select clearable style="width:100%" v-model="scope.row.printColor"
                                                placeholder="请选择印色">
                                                <el-option v-for="item in ems_order_print_color" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="规格" prop="spec" width="120" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-select clearable style="width:100%" v-model="scope.row.spec"
                                                placeholder="请选择规格">
                                                <el-option v-for="item in ems_order_spec" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="印张" width="120" prop="printSheet" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input v-model="scope.row.printSheet" placeholder="请输入印张"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                
                                <el-table-column label="成品尺寸(mm)" width="120" prop="dimension" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input v-model="scope.row.dimension" placeholder="请输入成品尺寸"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="交货日期" min-width="120" prop="deliverDate" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderProduct.' + scope.$index + '.deliverDate'"
                                            :rules="[{ required: true, message: '交货日期', trigger: 'blur' }]">
                                            <el-date-picker style="width: 100%; " v-model="scope.row.deliverDate"
                                                value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" />
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="120" prop="remark" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form>
                    </div>
                </el-collapse-item> -->
                <!-- <el-collapse-item disabled  title="内文明细" name="4">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">内文明细</span>
                    </template>
                    <div class="order-form">
                        <el-form :model="data" ref="orderNeiwenForm" :disabled="flag" class="data-form">
                            <el-table :data="data.orderNeiwen" ref="orderNeiwenRef" border
                                :header-cell-class-name="mustOrderNeiwen" :row-class-name="tableRowClassName">
                                <el-table-column label="序号" width="60" type="index" align="center" />
                                <el-table-column v-if="route.query?.id && !copy" label="订单品种编码" min-width="120"
                                    prop="breedNo" align="center">
                                </el-table-column>
                                <el-table-column label="品种" prop="breedType" min-width="160" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.breedType'"
                                            :rules="[{ required: true, message: '品种', trigger: 'blur' }]">
                                            <el-select style="width:100%" v-model="scope.row.breedType" disabled
                                                placeholder="请选择品种">
                                                <el-option v-for="item in ems_order_breed_type" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="组成" min-width="160" prop="makeUp" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.makeUp'"
                                            :rules="[{ required: true, message: '组成', trigger: 'blur' }]">
                                            <el-select style="width:100%" disabled v-model="scope.row.makeUp"
                                                placeholder="请选择组成">
                                                <el-option v-for="item in ems_order_make_up" :key="item.value"
                                                    :label="item.label" :value="item.value" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="目录(起)" width="120" prop="catalogueBegin" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.catalogueBegin'"
                                            :rules="[{ required: true, message: '目录(起)', trigger: 'blur' }]">
                                            <el-input type="number" @blur="changePageSum(scope.row, scope.$index)"
                                                v-model="scope.row.catalogueBegin" placeholder="请输入目录(起)"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="背/目录(止)" width="120" prop="catalogueEnd" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.catalogueEnd'"
                                            :rules="[{ required: true, message: '背/目录(止)', trigger: 'blur' }]">
                                            <el-input type="number" @blur="changePageSum(scope.row, scope.$index)"
                                                v-model="scope.row.catalogueEnd" placeholder="请输入目录(起)"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="正文(起)" width="120" prop="textBegin" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.textBegin'"
                                            :rules="[{ required: true, message: '正文(起)', trigger: 'blur' }]">
                                            <el-input type="number" @blur="changePageSum(scope.row, scope.$index)"
                                                v-model="scope.row.textBegin" placeholder="请输入正文(起)"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="正文(止)" width="120" prop="textEnd" align="center">
                                    <template #default="scope">
                                        <el-form-item :prop="'orderNeiwen.' + scope.$index + '.textEnd'"
                                            :rules="[{ required: true, message: '正文(止)', trigger: 'blur' }]">
                                            <el-input type="number" @blur="changePageSum(scope.row, scope.$index)"
                                                v-model="scope.row.textEnd" placeholder="请输入正文(止)"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="共(码)" width="120" prop="pageSum" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input type="number" disabled v-model="scope.row.pageSum"
                                                placeholder="自动计算"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                                <el-table-column label="印张" width="120" prop="printSheet" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input type="number" disabled v-model="scope.row.printSheet"
                                                placeholder="自动计算"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                                <el-table-column label="备注" width="120" prop="remark" align="center">
                                    <template #default="scope">
                                        <el-form-item>
                                            <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                                        </el-form-item>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form>
                    </div>
                </el-collapse-item> -->
            </el-collapse>
        </el-card>
    </div>
</template>

<script setup>
import { toNumber } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsView'
import auth from '@/plugins/auth'
const tagsViewStore = useTagsViewStore()
import {
    addMesOrderInfo,
    editMesOrderInfo,
    getMesOrderDetail,
    getMesOrderInfo,
} from '@/api/production/order'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance()
import useUserStore from '@/store/modules/user'
const {
    ems_order_pack_way,
    ems_workshop_subject_type,
    ems_order_make_up,
    ems_order_breed_type,
    ems_order_binding_mode,
    ems_order_spec,
    ems_order_print_color,
    ems_order_practical_paper,
    ems_produce_book_size,
    mes_paper_type,
    ems_machine_info_size,
    ems_produce_color,
    ems_produce_paper_size,
} = proxy.useDict(
    'ems_order_practical_paper',
    'ems_order_print_color',
    'ems_order_binding_mode',
    'ems_order_spec',
    'ems_order_pack_way',
    'ems_order_make_up',
    'ems_workshop_subject_type',
    'ems_order_breed_type',
    'ems_produce_book_size',
    'mes_paper_type',
    'ems_machine_info_size',
    'ems_produce_color',
    'ems_produce_paper_size'
)

const route = useRoute()
const router = useRouter()
const activeNames = ['1', '2', '3', '4']
const userRef = ref(null)
const orderBreedForm = ref(null)
const flag = ref(false)
const copy = ref(false)
const chnageState = ref([])
const breedPidList = ref([])
const data = reactive({
    orderBreed: [], // 品种
    orderProduct: [], // 明细
    orderNeiwen: [], // 内文
    form: {},
    rules: {
        bookCode: [{ required: true, message: '书刊编码不能为空', trigger: 'blur' }],
        orderName: [{ required: true, message: '书刊名称不能为空', trigger: 'blur' }],
        // orderNo: [{ required: true, message: "订单编码不能为空", trigger: "blur" },
        // {
        //     validator: (rule, value, callback) => {
        //         getMesOrderInfo({ orderNoString: value }).then(res => {
        //             if (!route.query.id) {
        //                 if (res.rows.length > 0) {
        //                     callback(new Error('订单编码不能重复'))
        //                 } else {
        //                     callback()
        //                 }
        //             } else {
        //                 if (route.query.copy) {
        //                     if (res.rows.length > 0) {
        //                         callback(new Error('订单编码不能重复'))
        //                     } else {
        //                         callback()
        //                     }
        //                 } else {
        //                     if (value !== orderNoVal.value) {
        //                         if (res.rows.some(row => row.orderNo === value)) {
        //                             callback(new Error('订单编码不能重复'));
        //                         }
        //                     } else {
        //                         callback();
        //                     }
        //                 }
        //             }
        //         })
        //     },
        //     trigger: 'blur'
        // },
        // ],
        printingCount: [{ required: true, message: '印刷数量(册)不能为空', trigger: 'blur' }],
        fileDate: [{ required: true, message: '文件日期不能为空', trigger: 'blur' }],
        packWay: [{ required: true, message: '打包方式不能为空', trigger: ['blur'] }],
        subjectType: [{ required: true, message: '科目不能为空', trigger: ['blur'] }],
        publishingHouse: [{ required: true, message: '出版社不能为空', trigger: 'blur' }],
        fixPrice: [{ required: true, message: '定价不能为空', trigger: 'blur' }],
        bookNo: [{ required: true, message: '书号不能为空', trigger: 'blur' }],
    },
})
const printCategoryList = ref([
    {
        label: '封面',
        value: '1',
    },
    {
        label: '内文',
        value: '2',
    },
])
const tip = ref(0)
const changePubNo = row => {
    orderBreed.value.forEach(item => {
        item.pubNo = row
    })
}

// 权限
const permissions = useUserStore().roles

if (permissions.includes('orderFM') && !permissions.includes('orderNW')) {
    printCategoryList.value = [
        {
            label: '封面',
            value: '1',
        },
        {
            label: '内文',
            value: '2',
            diasbled: true,
        },
    ]
    tip.value = 1
} else if (permissions.includes('orderNW') && !permissions.includes('orderFM')) {
    printCategoryList.value = [
        {
            label: '封面',
            value: '1',
            diasbled: true,
        },
        {
            label: '内文',
            value: '2',
        },
    ]
    tip.value = 2
} else {
    printCategoryList.value = [
        {
            label: '封面',
            value: '1',
        },
        {
            label: '内文',
            value: '2',
        },
    ]
    tip.value = 0
}
const { form, rules, orderBreed, orderProduct, orderNeiwen } = toRefs(data)
if (route.query?.id) {
    getMesOrderDetail({ pid: route.query.id }).then(res => {
        Object.assign(form.value, { ...res.data })
        // orderNoVal.value = res.data.orderNo
        if (res.data.orderBreed) {
            res.data.orderBreed.forEach(item => {
                item.breedType = item.breedType?.toString()
                item.practicalPaper = item.practicalPaper?.toString()
                if (route.query.copy) {
                    item.breedNo = null
                }
            })
        } else {
            res.data.orderBreed = []
        }
        orderBreed.value = res.data.orderBreed
        form.value.packWay = res.data.packWay?.toString()
        if (route.query.info) {
            flag.value = true
        }
        if (route.query.copy) {
            copy.value = true
            form.value.orderNo = ''
        }
    })
} else {
    form.value = {}
    orderBreed.value = []
    flag.value = false
    copy.value = false
}
// watch(() => route.query?.id, (newValue, oldValue) => {
//     if (newValue) {

//     }
//     else {

//     }
// }, { immediate: true });
//  返回
const goBack = () => {
    router.push('/production/order')
    tagsViewStore.delView(route)
    // setTimeout(() => {
    //     tagsViewStore.delView(route);
    // }, 0);
    // router.go(-1)
}
// 品种金额计算
const changeSumPrice = (row, index) => {
    if (row.lingCount && row.processPrice) {
        let sum = Number(row.lingCount) * Number(row.processPrice)
        orderBreed.value[index].sumPrice = toNumber(sum, 2)
    }
}
// 共（码）计算
const changePageSum = (row, index) => {
    if (row.textEnd && row.textBegin && row.catalogueEnd) {
        let count = Number(row.textEnd) - Number(row.textBegin) + 1 + Number(row.catalogueEnd)
        let printSheet = count / 16
        orderNeiwen.value[index].pageSum = toNumber(count, 0)
        orderNeiwen.value[index].printSheet = toNumber(printSheet, 1)
    }
}

const must = obj => {
    let mustColumns = []
    if (route.query?.id) {
        if (route.query.copy) {
            mustColumns = [1, 2, 3, 4, 5]
        } else {
            mustColumns = [2, 3, 4, 5, 6]
        }
    } else {
        mustColumns = [1, 2, 3, 4, 5]
    }
    if (mustColumns.includes(obj.columnIndex)) {
        return 'must'
    }
}
const mustProduct = obj => {
    let mustColumns = []
    if (route.query?.id) {
        if (route.query.copy) {
            mustColumns = [1, 2, 3, 8]
        } else {
            mustColumns = [2, 3, 4, 9]
        }
    } else {
        mustColumns = [1, 2, 3, 8]
    }
    if (mustColumns.includes(obj.columnIndex)) {
        return 'must'
    }
}
const mustOrderNeiwen = obj => {
    let mustColumns = []
    if (route.query?.id) {
        if (route.query.copy) {
            mustColumns = [1, 2, 3, 4, 5, 6]
        } else {
            mustColumns = [2, 3, 4, 5, 6, 7]
        }
    } else {
        mustColumns = [1, 2, 3, 4, 5, 6]
    }
    if (mustColumns.includes(obj.columnIndex)) {
        return 'must'
    }
}
const generateUniqueId = () => {
    const timestamp = Date.now().toString()
    const randomNum = Math.floor(Math.random() * 1000).toString()
    return Number(timestamp + randomNum)
}
//  新增产品品种
const handleAddorderBreed = () => {
    orderBreed.value.push({
        pid: generateUniqueId(),
        type: 1,
        pubNo: form.value.pubNo,
        printCount: form.value.printingCount,
    })
}

// 组成分解
const changeOrderProduct = row => {
    if (orderProduct.value.length > 0) {
        orderProduct.value = orderProduct.value.filter(item => item.breedPid !== row.pid)
    }
    if (orderNeiwen.value.length > 0) {
        orderNeiwen.value = orderNeiwen.value.filter(item => item.breedPid !== row.pid)
    }
    if (row.makeUp?.length > 0 && row.breedType) {
        row.makeUp.forEach(element => {
            orderProduct.value.push({
                type: 1,
                deliverDate: row.deliverDate,
                pid: generateUniqueId(),
                breedPid: row.pid,
                makeUp: element.toString(),
                breedType: row.breedType,
            })
            if (element == 3) {
                orderNeiwen.value.push({
                    type: 1,
                    catalogueBegin: 1,
                    breedPid: row.pid,
                    makeUp: element.toString(),
                    breedType: row.breedType,
                })
            }
        })
    }
}
// 产品尺寸自动带出
const changeDimension = row => {
    if (orderProduct.value.length > 0) {
        orderProduct.value.forEach(item => {
            if (row.pid === item.breedPid) {
                item.dimension = row.dimension
            }
        })
    }
}
// 交货日期自动带出
const changeDeliverDate = row => {
    console.log(row)
    if (orderProduct.value.length > 0) {
        orderProduct.value.forEach(item => {
            console.log(item)
            if (row.pid === item.breedPid) {
                item.deliverDate = row.deliverDate
            }
        })
    }
}
// 被选中
const handleSelectionChange = row => {
    chnageState.value = row
}

const tableRowClassName = ({ row, rowIndex }) => {
    if (chnageState.value.some(item => item.pid === row.breedPid)) {
        return 'success-row'
    } else {
        return ''
    }
}

const handleDelete = row => {
    proxy.$modal.confirm('是否确认删除该产品品种以及产品和内文明细？').then(function () {
        if (route.query?.id && row.type == 2) {
            breedPidList.value.push(row.pid)
        }
        //   orderNeiwen.value = orderNeiwen.value.filter(
        //     (item) => item.breedPid !== row.pid
        //   );
        //   orderProduct.value = orderProduct.value.filter(
        //     (item) => item.breedPid !== row.pid
        //   );
        orderBreed.value = orderBreed.value.filter(item => item.pid !== row.pid)
        proxy.$modal.msgSuccess('删除成功')
    })
}
// 确认

const listToObj = val => {
    console.log(val)
    let newArr = []
    if (val.length > 0) {
        newArr = val.map(item => {
            return {
                ...item,
                makeUp: item.makeUp?.join(','),
            }
        })
    }
    return newArr
}

const submitForm = async () => {
    try {
        await userRef.value.validate()
        await orderBreedForm.value.validate()
        // const subjectType = form.value.subjectType.join(',')
        if (route.query?.id) {
            if (copy.value) {
                // 复制
                form.value.status = 1
                await addMesOrderInfo({
                    ...form.value,
                    orderBreed: orderBreed.value,
                })
                ElMessage({
                    message: '复制成功',
                    type: 'success',
                })
            } else {
                await editMesOrderInfo({
                    ...form.value,
                    orderBreed: orderBreed.value,
                })
                ElMessage({
                    message: '编辑成功',
                    type: 'success',
                })
            }
            goBack()
        } else {
            // 新增
            form.value.status = 1
            await addMesOrderInfo({
                ...form.value,
                orderBreed: orderBreed.value,
            })
            ElMessage({
                message: '新增成功',
                type: 'success',
            })
            goBack()
        }
    } catch (error) {
        if (Object.keys(error)?.join(',').includes('.')) {
            const errInfoList = Object.values(error)
            console.log(errInfoList)
            const err = []
            errInfoList.forEach(item => {
                err.push(item[0].message)
            })
            ElMessage({
                message: `请将${err.join('、')}信息补充完整`,
                type: 'warning',
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.footer {
    text-align: center;
}

:deep(.el-pagination) {
    position: unset;
}

.order-form :deep(.el-form-item) {
    margin-bottom: 0px;
}

:deep(.el-table th.must div:before) {
    content: '*';
    color: #ff1818;
}

:deep(.el-table) .success-row {
    background: #dae5f4 !important;
}
</style>
